<template>
  <div>
    <!--    分类名-->
    <el-card key="one" class="box-card" :shadow="listShadow">
      <div slot="header" class="clearfix" v-if="showHead">
        <span>{{ category }}</span>
      </div>
    </el-card>
    <!--    条目区域-->
    <el-card class="box-card" :key="index" v-for="(file,index) in files" :shadow="listShadow">
      <div class="text item">
        <div style="width: 320px;float: left">
          <a :href="file.imgUrl">
            <!--             资源图-->
            <el-image class="boxImage" :src="file.imgUrl" style="width:300px;height:180px" alt="img">
              <div slot="error" class="image-slot">
                <a href="https://www.giaott.com/images/2022/10/05/jTGxS.png">
                  <el-image src="https://www.giaott.com/images/2022/10/05/jTGxS.png" fit="contain"/>
                </a>
              </div>
            </el-image>
            <span class="catLogo">
                {{ category }}
            </span>

          </a>
        </div>
        <div class="content">
          <router-link :to="{path:file.fileUrl,query: {id: file.id}}">
            <h5>
              {{ file.fileName }}
            </h5>
            <div style="font-size: 20px">
              {{ file.fileDescribe }}
            </div>
          </router-link>
          <!--          点赞收藏评论-->
          <div
            style="display: flex;justify-content: space-between;font-size: 15px;margin-top: 27px;vertical-align: center">
            <span>{{ file.uploadTime }}</span>
            <span class="icons">
                <span><img class="icon" src="../../assets/icon/点赞.png" alt="点赞"> {{ file.likes }}</span>
                <span><img class="icon" src="../../assets/icon/评论.png" alt="评论"> {{ file.comments }} 评论</span>
                <span><img class="icon" src="../../assets/icon/收藏.png" alt="收藏"> {{ file.collection }}收藏</span>
            </span>
          </div>
        </div>
      </div>
    </el-card>
    <!--    分页条-->
    <div style="padding: 34px 308px;">
      <el-pagination
        background
        layout="prev, pager, next"
        :total="page.records"
        :page-size="page.size"
        :page-count="page.pageCount"
        :current-page="page.current"
        prev-text="上一页"
        next-text="下一页"
        @current-change="changePage"
        @prev-click="changePage"
        @next-click="changePage"
      >
      </el-pagination>
    </div>
  </div>
</template>
<style scoped>
.catLogo {
  position: absolute;
  top: 15px;
  left: 4px;
  padding: 5px 10px;
  font-size: 15px;
  border-radius: 5px;
  background-color: #bbbec2;
}

/*.catLogo::before{*/
/*  content: '';*/
/*  position: absolute;*/
/*  width: 100%;*/
/*  height: 100%;*/

/*  background-color: #6c6b6b;*/
/*  opacity: 0.8;*/
/*}*/


.item {
  position: relative;

}

.content:hover {
  cursor: pointer;
}

/deep/ .el-pager {
  height: 50px;
}

/deep/ .el-card__body {
  padding: 0 20px;
}

.icons span {
  margin-right: 15px;
}

.icon {
  width: 15px;
  margin-right: 5px;
}

a {
  color: black;
  font-weight: Normal; /*CSS字体效果 普通 可以改成bold粗体 如果去除此行那么默认是不显示下划线的*/
  text-decoration: none; /*CSS下划线效果：无下划线*/
}
</style>

<script>
import {allFile, getFileTypeName} from "@//assets/http/request";

export default {
  name: 'ListContent',
  props: {
    showHead: {
      type: Boolean,
      default: true
    },
    listShadow: {
      type: String,
      default: 'always'
    }
  },
  data() {
    return {
      category: '最新',
      page: {
        records: 100,
        pageCount: 10,
        orders: [],
        current: 1,
        //页面大小
        size: 10,
      },
      files: [],
      //source_type_name(根据这个值获取分类数据)
      sourceCat: "",
    };
  },
  watch: {
    $route: {
      deep: true,
      immediate: true,
      handler() {
        this.sourceCat = this.$route.params.cat;
        this.getFile(this.sourceCat);
        this.getTypeName(this.sourceCat);
      }
    },
  },
  methods: {
    changePage(currentPage) {
      this.page.current = currentPage;
      this.getFile();
    },
    getFile(catName) {
      allFile(this.page, catName).then(res => {
        let result = res.data.data;
        this.files = res.data.data.records;

        console.log("文件详情",this.files);
        this.page.current = result.current;
        this.page.pageCount = result.pages;
        this.page.size = result.size;
        this.page.records = result.total;
      });
    },
    getTypeName(catName) {
      getFileTypeName(catName).then(res => {
        this.category = res.data.data;
      })
    }
  },
  mounted() {
    this.getFile(this.sourceCat);
    this.getTypeName(this.sourceCat);
  }
}
</script>
